<template>
  <div class="team_center">
    <div
      class="team_card"
      v-for="(teacherData,i) in teacherList"
      :key="teacherData.t_id"
    >
      <div class="tc_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ teacherData.t_name }}</span>
      </div>
      <div>
        <ul class="tc_mes">
          <li>
            工号：<span>{{ teacherData.t_schoolId }}</span>
          </li>
          <li>
            部门：<span>{{ teacherData.t_department }}</span>
          </li>
          <li>
            职位：<span>{{ teacherData.t_post }}</span>
          </li>
          <li>
            地址：<span>{{ teacherData.t_site }}</span>
          </li>
          <li>
            电话：<span>{{ teacherData.t_phone }}</span>
          </li>
          <li>
            邮件：<span>{{ teacherData.t_eMail }}</span>
          </li>
        </ul>
      </div>
      <div>
        <el-button
          size="small "
          type="primary"
          round
          @click="inteacherRoom(teacherData.t_id)"
          >进入空间</el-button
        >
        <el-button
          size="small "
          type="success"
          @click="openamendInf(i)"
          round
          >修改信息</el-button
        >
      </div>
    </div>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <ul class="tc_mes">
        <li>
          工号：<input
            type="text"
            v-model="teacherList[indexteacher].t_schoolId"
          />
        </li>
        <li>
          部门：<input
            type="text"
            v-model="teacherList[indexteacher].t_department"
          />
        </li>
        <li>
          职务：<input
            type="text"
            v-model="teacherList[indexteacher].t_post"
          />
        </li>
        <li>
          地址：<input
            type="text"
            v-model="teacherList[indexteacher].t_site"
          />
        </li>
        <li>
          电话：<input
            type="text"
            v-model="teacherList[indexteacher].t_phone"
          />
        </li>
        <li>
          邮件：<input
            type="text"
            v-model="teacherList[indexteacher].t_eMail"
          />
        </li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelamendInf">取 消</el-button>
        <el-button type="primary" @click="amendInf">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      teacherList: [],
      dialogFormVisible: false,
      indexteacher: 1,
    };
  },
  mounted() {
    this.getTeacherList();
  },
  methods: {
    getTeacherList() {
      axios.post(`http://localhost:3000/getTeacherList`, {}).then((ret) => {
        this.teacherList = ret.data.teacherList;
        console.log(ret.data);
      });
    },
    inteacherRoom(id) {
      this.$router.push({ path: "/Administrator/TeacherInf", query: { teacher_id: id } });
    },
    cancelamendInf() {
      this.dialogFormVisible = false;
    },
    openamendInf(id) {
      this.dialogFormVisible = true;
      this.indexteacher = id;
    },
    amendInf() {
      axios
        .post(`http://localhost:3000/updateTeacher`, {
          teacherData: this.teacherList[this.indexteacher],
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.cancelamendInf();
          }
        });
    },
  },
};
</script>

<style scoped>
.team_center {
  padding: 20px;
}
.team_card {
  width: 85%;
  height: 100px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 1xp solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.tc_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tc_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #40c9c6;
}
.tc_mes {
  width: 600px;
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
.tc_mes > li {
  width: 40%;
  font-size: 14px;
  color: #606266;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.tc_mes > li > span {
  padding: 0 5px;
}
</style>
